<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> -->
    <title>Document</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <!-- 引入swiper框架的样式文件 -->
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../../css/traveler/swiper/swiper.min.css" type="text/css">

    <link rel="stylesheet" href="../../css/traveler/animate.css" type="text/css">
    <link rel="stylesheet" href="../../css/traveler/font-awesome.css" type="text/css">
    <link rel="stylesheet" href="../../css/traveler/style.css" type="text/css">


    <!-- Demo styles -->
    <style>
        #headerImg {
            width: 25px;
            height: 23px;
            padding: 0px;
        }

        #headerImg2 {
            width: 100px;
            height: 100px;
            padding: 0px;
        }

        .nav>li:hover .dropdown-menu {

            display: block;
        }

        a {
            color: rgb(26, 24, 24);
        }

        .navbar-brand {
            opacity: 50%;
        }

        .swiper-container {
            width: 65%;
            height: auto;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* border: 1px solid red; */
            width: 338px;
            height: 382px;


            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        /* * {
				margin: 0;
				padding: 0;
				text-decoration: none;
				font-family: 'montserrat';
			} */

        .middle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .card {
            cursor: pointer;
            /* width: 320px;
				height: 480px; */
            width: 100%;
            height: 100%;
        }

        .front,
        .back {
            width: 100%;
            height: 100%;
            overflow: hidden;
            backface-visibility: hidden;
            position: absolute;
            transition: transform 0.6s linear;
        }

        .front img {
            height: 100%;
        }

        .front {
            transform: perspective(600px) rotateY(0deg);
        }

        .back {
            /* background: #f1f1f1; */
            /* background-color: #fff; */
            transform: perspective(600px) rotateY(180deg);
        }

        .back-content {
            color: #2c3e50;
            text-align: center;
            width: 100%;
        }

        .sm {
            margin: 20px 0;
        }

        .sm a {
            display: inline-flex;
            width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
            color: #2c3e50;
            font-size: 18px;
            transition: 0.4s;
            border-radius: 50%;
        }

        .sm a:hover {
            background: #2c3e50;
            color: white;
        }

        .card:hover>.front {
            transform: perspective(600px) rotateY(-180deg);
        }

        .card:hover>.back {
            transform: perspective(600px) rotateY(0deg);
        }

        .parallelogram {
            width: 20%;
            height: 15px;

            -webkit-transform: skew(30deg);
            -moz-transform: skew(30deg);
            -o-transform: skew(30deg);
            transform: skew(30deg);
            float: left;
            margin-left: 15px;

        }

        /* 轮播 */
        * {
            margin: 0;
            padding: 0;
            font-family: 微软雅黑;
        }

        html,
        body {
            width: 100%;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container {
            min-width: 1000px;
            position: relative;
        }


        .banner_container {
            width: 100%;
            position: relative;
            min-width: 1000px;
        }

        .banner_container .container {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .banner_container .container ul {
            width: 100%;
            height: 100%;
            display: block;
            position: relative;
            overflow: hidden;
        }

        .banner_container .container ul li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
        }

        .banner_container .container ul li img {
            width: 100%;
            display: block;
        }

        .banner_container .container ul li .text-box {
            width: 1000px;
            position: absolute;
            top: 25px;
            left: 50%;
            margin-left: -500px;
        }

        .banner_container .container ul li .text-box p {
            color: #fff;
            font-size: 24px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
        }

        .banner_container .container ul li .text-box p span {
            font-size: 38px;
        }

        .banner_container .container ul li .text-box h2 {
            color: #fff;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
            font-size: 26px;
            font-weight: normal;
        }

        .banner_container .container ul .banner-tran {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-transition: all;
            transition: all;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
            -webkit-transition-duration: .5s;
            transition-duration: .5s;
        }

        .banner_container .banner-index-box {
            width: 110px;
            height: 340px;
            position: absolute;
            z-index: 10;
            top: 50%;
            margin-top: -175px;
            right: 40px;
        }

        .banner_container .banner-index-box li {
            width: 110px;
            height: 62px;
            position: relative;
            margin-bottom: 6px;
        }

        .banner_container .banner-index-box li a {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        .banner_container .banner-index-box li img {
            width: 100%;
            height: 100%;
            z-index: 11;
            position: relative;
            display: block;
            border-radius: 3px;
        }

        .banner_container .banner-index-box li span {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            box-sizing: border-box;
            border: 2px solid transparent;
            z-index: 12;
            cursor: pointer;
            border-radius: 3px;
        }

        .banner_container .banner-index-box .banner-index-active span {
            border: 2px solid #ff9d00;
        }


        #lunbo img {
            width: 100%;
        }

        .show_heading {
            width: 100%;
            height: 164px;
        }

        #show_heading2 {
            width: 40px;
            height: 38px;
            padding: 0px;
        }
    </style>
</head>

<body>

    <!--响应式导航-->
    <div class="container-fluid" id="head" style="margin-bottom: 0px;">
        <div class="row">

            <nav class="navbar" role="navigation"
                style="background-color: rgb(206, 228, 247);padding-left: 70px;margin-bottom: 2px">
                <div class="container-fluid">
                    <div>
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse" style="background-color: royalblue">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="index.html"> <img src="imgs/index/logo.jpg" alt="失败" id="logo"
                                class="img-circle navbar-brand"></a>
                        <a class="navbar-brand" href="index.html" style="padding-left: 0px;font-family:楷体">
                            <span data-toggle="tooltip" title="悠 U 新方式">
                                悠&nbsp;U</span></a>
                    </div>

                    <div class="collapse navbar-collapse" id="example-navbar-collapse ">
                        <ul class="nav navbar-nav ">
                            <li><a href="index.html">
                                    <span style="padding:0px 20px" data-toggle="tooltip" title="首页"> 首页</span></a></li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    游记<b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-user"
                                                style="text-shadow: rgb(216, 206, 206) 3px -1px;"></span>
                                            &nbsp;达人
                                            <span class="badge pull-center" style="background-color: red">hot</span>
                                        </a></li><br>
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-edit"></span>
                                            写游记
                                            <span class="badge pull-center"
                                                style="background-color: red;font-size:3px">赚钻石</span>
                                        </a></li><br>
                                    <li><a href="#">
                                            <span class="glyphicon glyphicon-flag"></span>
                                            游记主页</a></li><br>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    景点<b class="caret"></b>
                                    <!-- <span class="label label-danger" style="font-size: 1px;">NEW</span>-->
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#"><span class="glyphicon glyphicon-fire">&nbsp;主题景点</span>
                                            <span class="badge pull-center"
                                                style="background-color: red;font-size:3px">NEW</span>
                                        </a></li><br>
                                    <li><a href="#"><span class="glyphicon glyphicon-plane">&nbsp;精品行程</span></a></li>
                                    <br>
                                    <li><a href="#"><span class="glyphicon glyphicon-bell">&nbsp;当地玩乐</span></a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    <span data-toggle="tooltip" title="导&nbsp;游">导游</span>
                                    <span class="badge pull-center"
                                        style="background-color: red;font-size:1px">hot</span>
                                </a>
                            </li>

                        </ul>

                        <ul class="nav navbar-nav navbar-right" style="padding-right: 100px">

                            <li class="dropdown">
                            <li> <a></a></li>
                            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                    style="font-family: 楷体;padding-left: 0px">
                                    我的悠 U &nbsp;<img id="headerImg" src="../../imgs/travler/travler1.jpg"
                                        class="img-circle"><b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="#">我的订单</a>
                                    </li>
                                    <li>
                                        <a href="#">我的导游</a>
                                    </li>
                                    <li>
                                        <a href="#">我的钱包</a>
                                    </li>

                                    <li>
                                        <a href="#">我的游记</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li> <a href="#">互动信息</a> </li>
                                    <li> <a href="#">我的账号</a> </li>
                                    <li> <a href="#">退出</a> </li>

                                </ul>
                            </li>
                            <li><a href="#weibo"><i class="fa fa-weibo"></i></a></li>
                            <li><a href="#weixin"><i class="fa fa-weixin"></i> </a></li>
                            <li><a href="#weixin"><i class="fa fa-qq"></i></a></li>
                            <li><a href="">登录</li> </a>
                            <li><a href="">注册</li> </a>

                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <!--轮播 - banner - begin-->
    <div class="banner_container">
        <div class="container">
            <ul id="banner-box">
                <li style="z-index: 3;opacity: 1;">
                    <a href="">
                        <img src="imgs/index/pic_001.jpg" alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>唯有旅行与美食，不负时光</h2>
                        </div>
                    </a>
                </li>
                <li style="z-index: 1;opacity: 1;">
                    <a href="">
                        <img src="https://n4-q.mafengwo.net/s14/M00/78/71/wKgE2l15xeyAGP_NAAbXnvbYGdA308.jpg?imageMogr2%2Finterlace%2F1"
                            alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>印度尼西亚︱我的人生伏笔，从东爪哇到巴厘岛</h2>
                        </div>
                    </a>
                </li>
                <li style="z-index: 1;opacity: 1;">
                    <a href="">
                        <img src="imgs/index/pic_003.jpg" alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>天地山水，超你所愿（附12天加拿大自驾指南）</h2>
                        </div>
                    </a>
                </li>
                <li style="z-index: 1;opacity: 1;">
                    <a href="">
                        <img src="imgs/index/pic_004.jpg" alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>锦州 | 2天暴食13顿，这是一座来了没时间观光的城市！</h2>
                        </div>
                    </a>
                </li>
                <li style="z-index: 1;opacity: 1;">
                    <a href="">
                        <img src="https://b3-q.mafengwo.net/s14/M00/43/49/wKgE2l12JriAGm53AAduwcseKIs827.jpg?imageMogr2%2Finterlace%2F1"
                            alt="">
                        <div class="text-box">
                            <p><span>11</span>/Dec.2017</p>
                            <h2>澳之秘境，倾翻的浪漫盐池——西澳南澳自驾笔记</h2>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <ul id="banner-index-box" class="banner-index-box">
            <li class="banner-index-active">
                <img src="imgs/index/pic_001.jpg" alt="">
                <span></span>
            </li>
            <li>
                <img src="https://n4-q.mafengwo.net/s14/M00/78/71/wKgE2l15xeyAGP_NAAbXnvbYGdA308.jpg?imageMogr2%2Finterlace%2F1"
                    alt="">
                <span></span>
            </li>
            <li>
                <img src="imgs/index/pic_003.jpg" alt="">
                <span></span>
            </li>
            <li>
                <img src="imgs/index/pic_004.jpg" alt="">
                <span></span>
            </li>
            <li>
                <img src="https://b3-q.mafengwo.net/s14/M00/43/49/wKgE2l12JriAGm53AAduwcseKIs827.jpg?imageMogr2%2Finterlace%2F1"
                    alt="">

                <span></span>
            </li>
        </ul>
    </div>

    <!--轮播 - banner - end-->

    <div class="container-fluid">
        <div class="row">
            <div style="text-align: center;margin-top: 20px;padding:5px;">
                <font size="6px" color="black">悠&nbsp;U&nbsp;达&nbsp;人</font><br>
                <font size="3px" color="gray">每一位达人哈哈哈哈哈</font>

            </div>
            <div style="margin-bottom: 25px">
                <div style="position:relative;width:30%;left:-90px;top:0;">
                    <div style="width: 20%;float:right">
                        <a class="btn btn-primary btn-rounded btn-block" href="apply_traveler.html"
                            style="width: 160px;">
                            <font size="2px" color="black">申请成为悠U达人>></font>

                        </a>

                    </div>
                </div>
                <div style="position:relative;width:30%;left:77%;top:5px;;">
                    <a href="#">
                        <font size="2px" color="gray">更多达人>></font>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler1.jpg)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler1.jpg" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler2.jpg)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler2.jpg" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler1.jpg)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler1.jpg" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler1.jpg)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler1.jpg" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler1.jpg)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler1.jpg" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler8.jpg)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler8.jpg" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler6.png)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler6.png" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler8.jpg)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler8.jpg" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="swiper-slide">
                <a href="travlerinfo.html">
                    <div class="card middle">
                        <!-- 正面页面 -->
                        <div class="front" style="background-image: url(../../imgs/travler/travler8.jpg)">
                            <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                                <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                        </div>
                        <!-- 后面页面 -->
                        <div class="back">
                            <!-- 上榜部分背景颜色 -->
                            <div style="width:100%;height:30%; background-color:turquoise;"></div>
                            <!-- 头像盒子绝对定位-层数改变 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                                <img id="headerImg2" src="../../imgs/travler/travler8.jpg" class="img-circle">
                            </div>
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                                <font size="3px" color="black">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                            </div>
                            <!-- 标签 -->
                            <div
                                style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                                <div class="parallelogram">
                                    <font size="1px" color="black">自由摄影师</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">旅游达人</font>
                                </div>
                                <div class="parallelogram">
                                    <font size="1px" color="black">美食家</font>
                                </div>
                            </div>
                            <!-- 简介 -->
                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                                <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                            </div>

                            <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                                <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="swiper-slide">
                <div class="card middle">
                    <!-- 正面页面 -->
                    <div class="front" style="background-image: url(../../imgs/travler/travler3.png)">
                        <!-- <img src="../../imgs/travler/travler1.jpg"/> -->
                        <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:90%;">
                            <font size="3px" color="whitesmoke">/&nbsp;&nbsp;一只小白兔&nbsp;&nbsp;/</font>
                        </div>
                    </div>
                    <!-- 后面页面 -->
                    <div class="back">
                        <!-- 上榜部分背景颜色 -->
                        <div style="width:100%;height:30%; background-color:turquoise;"></div>
                        <!-- 头像盒子绝对定位-层数改变 -->
                        <div style="position:absolute;width:100%;height:50px;z-index:2;left:0%;top:17%;">
                            <img id="headerImg2" src="../../imgs/travler/travler3.png" class="img-circle">
                        </div>
                        <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:46%;">
                            <font size="3px" color="black">/&nbsp;&nbsp;春风拂面&nbsp;&nbsp;/</font>
                        </div>
                        <!-- 标签 -->
                        <div
                            style="position:absolute;width:100%;height:25px;z-index:2;left:0;top:55%; padding:2px;margin-left: 30px">

                            <div class="parallelogram">
                                <font size="1px" color="black">自由摄影师</font>
                            </div>
                            <div class="parallelogram">
                                <font size="1px" color="black">旅游达人</font>
                            </div>
                            <div class="parallelogram">
                                <font size="1px" color="black">美食家</font>
                            </div>
                        </div>
                        <!-- 简介 -->
                        <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:65%;">
                            <font size="1px" color="black">夜风思心绪，梦随心清散，如若破境意，<br>愿向必自来！</font>
                        </div>

                        <div style="position:absolute;width:100%;height:50px;z-index:2;left:0;top:80%;">
                            <button type="button" class="btn btn-primary">聆听TA的旅行故事>></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- 广告 -->
    <!--轮播 - banner - begin-->
    <div class="container " id="lunbo"
        style="border:2px solid blanchedalmond;margin-top: 0px;height: 15px;margin-top: 55px;">
        <div class="row">
            <!-- <nav class="narbar navbar-fixed-top"> -->
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="../../imgs/travler/adv1.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="../../imgs/travler/adv1.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="../../imgs/travler/adv1.jpg" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3=""
                        aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">
                    <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
            <!-- </nav> -->
        </div>
    </div>


    <!-- 优质推文 -->

    <div class="container-fluid" style="margin-top: 130px;background:#F5F5F5;">
        <div class="row">
            <!-- 标题 -->
            <div class="travlershow" style="text-align: center;margin-top: 20px;margin-top: 60px;">
                <font size="6px" color="black">达人作品SHOW</font><br>

                <font size="3px" color="gray">多彩回忆，记录美好，在这里，等你来</font>
            </div>
        </div>
        <!-- 作品展示 -->
        <div class="row" style="width: 80%;margin:0 auto;margin-top:40px;">
            <!-- <div class="col-md-6"> -->
            <div class="tabs-container">
                <ul class="nav nav-tabs" style="align-self: center">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">新作推荐</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">热门游记</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">待定</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">八个旅行目的地，带你领略不一...</font>
                                    </div>
                                </a>
                                <div style="padding:10px;">
                                    <div style="float:left;">
                                        <a href="travlerinfo.html"><img src="../../imgs/travler/dis_ati1.JPG"
                                                class="img-circle" id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px;">
                                        <a href="travlerinfo.html">
                                            <font size="2px" color="#00BFFF">多彩回忆</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px;">
                                        <font size="2px" color="gray">2019.08.24</font>

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati2.jpg" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">八个旅行目的地，带你领略不一...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="travlerinfo.html"><img src="../../imgs/travler/dis_ati1.JPG"
                                                class="img-circle" id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="travlerinfo.html">
                                            <font size="2px" color="#00BFFF">多彩回忆</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="#链接至文章详情">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati3.jpg" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">八个旅行目的地，带你领略不一...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="travlerinfo.html"><img src="../../imgs/travler/dis_ati3.jpg"
                                                class="img-circle" id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="travlerinfo.html">
                                            <font size="2px" color="#00BFFF">多彩回忆</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati4.jpg" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">八个旅行目的地，带你领略不一...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="travlerinfo.html"><img src="../../imgs/travler/dis_ati4.jpg"
                                                class="img-circle" id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="travlerinfo.html">
                                            <font size="2px" color="#00BFFF">多彩回忆</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">八个旅行目的地，带你领略不一...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="travlerinfo.html"><img src="../../imgs/travler/dis_ati1.JPG"
                                                class="img-circle" id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="travlerinfo.html">
                                            <font size="2px" color="#00BFFF">多彩回忆</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">八个旅行目的地，带你领略不一...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="../../views/note/noteinfo.html">
                                            <img src="../../imgs/travler/dis_ati1.JPG" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">多彩回忆</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">八个旅行目的地，带你领略不一...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati1.JPG" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">多彩回忆</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">八个旅行目的地，带你领略不一...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati1.JPG" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">多彩回忆</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>



                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">趁你还年轻，趁他还未老...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati1.JPG" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">仰望星空</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>
                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati2.jpg" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">趁你还年轻，趁他还未老...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati2.jpg" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">仰望星空</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati3.jpg" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">趁你还年轻，趁他还未老...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati3.jpg" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="../../views/note/noteinfo.html">
                                            <font size="2px" color="#00BFFF">仰望星空</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati4.jpg" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">趁你还年轻，趁他还未老...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati4.jpg" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">仰望星空</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati5.jpg" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">趁你还年轻，趁他还未老...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati1.JPG" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">仰望星空</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="../../views/note/noteinfo.html">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">趁你还年轻，趁他还未老...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati1.JPG" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">仰望星空</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="#链接至文章详情">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">趁你还年轻，趁他还未老...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati1.JPG" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">仰望星空</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>

                            <div class="col-md-3"
                                style="height: 264px;padding-left: 8px;padding-right: 8px;margin-top: 20px;background-color: #F5FFFA">
                                <a href="#链接至文章详情">
                                    <div style="height: 164px;">
                                        <img src="../../imgs/travler/dis_ati1.JPG" class="show_heading">
                                    </div>
                                    <div
                                        style="width:100%;height:40px;padding-left:20px;padding-top:6px; background: #F5F5F5;">
                                        <font size="3px" color="black">趁你还年轻，趁他还未老...</font>
                                    </div>
                                </a>
                                <div style="padding:10px">
                                    <div style="float:left;">
                                        <a href="#达人详情"><img src="../../imgs/travler/dis_ati1.JPG" class="img-circle"
                                                id="show_heading2">
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <a href="#达人详情">
                                            <font size="2px" color="#00BFFF">仰望星空</font>
                                        </a>
                                    </div>
                                    <div style="float:left;padding:10px">
                                        <font size="2px" color="gray">2019.08.24</font>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>


                    <div style="position:relative;width:100%;height:50px;z-index:2;left:70%;top:-10px;">
                        <ul class="pagination pagination-lg">
                            <li><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>

                </div>

                <!-- </div> -->
            </div>


        </div>



        <!-- 底部导航 begin -->
        <div class="container-fluid" style="margin-top:10px;">
            <div class="row">
                <nav class="navbar navbar-inverse fixed-bottom" role="navigation">
                    <div class="container-fluid" style="font-size: 13px">
                        <div class="row">
                            <ul class="nav navbar-nav">
                                <li>
                                    <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 150px">
                                        <h4>悠&nbsp;U旅行</h4>
                                        <p>悠&nbsp;U是一个新方式的<span style="color: bisque"> "旅行交友"</span> 的网站,<br>
                                            旨在帮助旅行者计划和结伴游玩,<br>
                                            可以提供业余的引路人带给旅行者更好的 <span style="color: bisque"> "游玩体验"</span><br>
                                            提供一定的旅行日记,打造 <span style="color: bisque">"新方式旅行交友"</span><br>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px">
                                        <h4 style="text-align: center">关于我们</h4>
                                        <ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
                                            <li>关于悠 U</li>
                                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系我们</li><br>
                                            <li>服务协议</li>
                                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游记协议</li><br>
                                            <li>达人协议</li>
                                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私政策</li><br>
                                            <li>网络信息侵权通知指引</li><br>
                                            <li>网站地图</li>
                                            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商业合作</li><br>
                                            <li style="color: bisque">&nbsp;&nbsp;&nbsp;加入我们</li>

                                        </ul>
                                </li>
                                <li>
                                    <div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px">
                                        <h4 style="text-align: center">帮助中心</h4>
                                        <ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
                                            <li>新手上路</li><br>
                                            <li style="color: bisque">意见反馈</li>
                                            <li>&nbsp;&nbsp;&nbsp;&nbsp;常见问题</li><br>
                                            <li style="color: bisque">帮助中心</li>
                                            <li>&nbsp;&nbsp;&nbsp;&nbsp;旅行工具</li><br>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <br><br>
                        <hr>
                        <div style="color: rgb(177, 177, 177);margin-top: 20px;margin-left: 150px;font-size: 12px">
                            <div style="float: left;"><img src="imgs/index/logo.jpg" width="60px" height="40px"
                                    style="opacity: 0.7;border-radius: 80px;">
                            </div>
                            <div style="float: left;margin: 10px 5px;font-family: '楷体';font-size:18px">悠 U</div>
                            <div style="float: left;;margin-top: 10px;margin-left: 30px">© 2019 悠U
                                版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经营许可&nbsp;&nbsp;&nbsp;营业执照</div>
                            <div style="clear: both;margin-left: 130px;margin-bottom: 100px">
                                悠U不是旅行社,也不是代理商,我们只提供一些免费、客观、公正
                                、计费的攻略指南,以及一些业余的引路人
                                对外部网站概不负责</div>

                        </div>
                    </div>
                    <div
                        style="float: right;width: 40px;height: 50px;margin-right: 10px;background-color: aliceblue;text-align: center">
                        <a href="#top" style="color: rgb(177, 177, 177)"><br>Top&nbsp;↑</a>
                    </div>
                </nav>

            </div>
        </div>

        <!-- 底部导航 end -->

        <!-- Swiper JS -->
        <script src="../../js/traveler/swiper/swiper.min.js"></script>
        <script src="../../H+/js/content.js"></script>
        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                slidesPerColumn: 2,
                spaceBetween: 30,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        </script>


        <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
        <script src="../../plugins/jquery/jquery.min.js"></script>
        <!--引入bootstrap的js文件-->
        <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
        <script>
            $(document).ready(function () {
                $('.col-md-3').each(function () {
                    animationHover(this, 'pulse');
                });
            });


            $('#myCarousel').carousel({
                interval: 2000
            })

            // 轮播
            //t代表banner切换的时间间隔；int代表banner渐变的时长；auto代表banner是否自动播放
            function Banner(_t, _int, _auto) {
                this.bannerContainer = null;
                this.bannerBox = null;
                this.allBannerItem = null;
                this.bannerIndexBox = null;
                this.allBannerIndexItem = null;
                this.bannerInt = null;
                this.index = 0;
                this._t = _t;
                this._int = _int;
                this._auto = _auto;
                this.canChange = true;
            }
            Banner.prototype = {
                constructor: Banner,
                getElement: function () {
                    this.bannerContainer = document.getElementsByClassName("banner_container")[0];
                    this.bannerBox = document.getElementById("banner-box");
                    this.allBannerItem = this.bannerBox.getElementsByTagName("li");
                    this.bannerIndexBox = document.getElementById("banner-index-box");
                    this.allBannerIndexItem = this.bannerIndexBox.getElementsByTagName("li");
                },
                bannerInit: function () {
                    this.getElement();
                    this.bannerWidthInit();
                    (this._auto) && (this.bannerAutoPlay());
                    this.bannerIndexClick();
                },
                bannerWidthInit: function () {
                    var that = this;
                    that.setBannerWidth();
                    window.onresize = function () {
                        that.setBannerWidth();
                    };
                },
                setBannerWidth: function () {
                    var windowW = document.documentElement.clientWidth;
                    if (windowW < 1000) {
                        this.bannerContainer.style.height = 1000 / 3 + "px";
                    } else {
                        this.bannerContainer.style.height = windowW / 3 + "px";
                    }
                },
                bannerChange: function (index, nextIndex) {
                    var that = this;
                    if (that.canChange) {
                        that.canChange = false;
                        var item = that.allBannerItem;
                        item[nextIndex].style.zIndex = "2";
                        item[index].className += " banner-tran";
                        item[index].style.opacity = "0";
                        setTimeout(function () {
                            item[nextIndex].style.zIndex = "3";
                            item[index].style.zIndex = "1";
                            item[index].className = item[index].className.replace(/\sbanner-tran/, "");
                            item[index].style.opacity = "1";
                            that.index = nextIndex;
                            that.canChange = true;
                        }, that._int);
                    }
                },
                bannerAutoPlay: function () {
                    var that = this;
                    that.bannerInt = setInterval(function () {
                        var nextIndex = that.index + 1 === that.allBannerItem.length ? 0 : that.index + 1;
                        that.allBannerIndexItem[that.index].className = "";
                        that.allBannerIndexItem[nextIndex].className = "banner-index-active";
                        that.bannerChange(that.index, nextIndex);
                    }, that._t);
                },
                bannerIndexClick: function () {
                    var that = this;
                    var item = that.allBannerIndexItem;
                    for (var i = 0; i < item.length; i++) {
                        item[i].index = i;
                        item[i].addEventListener("click", function () {
                            if (this.className.indexOf("banner-index-active") === -1 && that.canChange) {
                                clearInterval(that.bannerInt);
                                (that._auto) && (that.bannerAutoPlay());
                                document.getElementsByClassName("banner-index-active")[0].className = "";
                                this.className = "banner-index-active";
                                that.bannerChange(that.index, this.index);
                            }
                        })
                    }
                }
            };
            var banner = new Banner(6000, 500, true);
            banner.bannerInit();

            $('#myCarousel').carousel({
                interval: 2000
            })

        </script>

        <script>
            $(document).ready(function () {
                $('.contact-box').each(function () {
                    animationHover(this, 'pulse');
                });
            });
        </script>




</body>

</html>